<template>
    <el-row class="main-cont padd20">
        <el-col class="tl mb20">
            <h3 class="m-h3">数据总览</h3>
        </el-col>
        <el-row :gutter="20">
            <el-col :span="8" class="item-list">
                <div class="grid-content bg-purple">
                    <div class="top box box-pack-between box-align-center">
                        <h3>学习时长</h3>
                        <el-image src="/static/image/home/time.png" class="img"></el-image>
                    </div>
                    <div class="bottom box box-pack-center box-align-end">
                        <div>累计</div>
                        <div class="time-num box box-align-end">{{info.xxsc}}</div>
                        <div>小时</div>
                    </div>
                    <el-image src="/static/image/home/time_bg.png" class="time"></el-image>
                </div>
            </el-col>
            <el-col :span="8" class="item-list">
                <div class="grid-content bg-purple">
                    <div class="top box box-pack-between box-align-center">
                        <h3>学习人数</h3>
                        <el-image src="/static/image/home/learn_num.png" class="img"></el-image>
                    </div>
                    <div class="bottom box box-pack-center box-align-end">
                        <div>累计</div>
                        <div class="time-num box box-align-end learn-num">{{info.xxrs}}</div>
                        <div>人次</div>
                    </div>
                    <el-image src="/static/image/home/learn_bg.png" class="learn"></el-image>
                </div>
            </el-col>
            <el-col :span="8" class="item-list">
                <div class="grid-content bg-purple">
                    <div class="top box box-pack-between box-align-center">
                        <h3>发布任务数</h3>
                        <el-image src="/static/image/home/fb_num.png" class="img"></el-image>
                    </div>
                    <div class="bottom box box-pack-center box-align-end">
                        <div>累计</div>
                        <div class="time-num box box-align-end fb-num">{{info.rws}}</div>
                        <div>次</div>
                    </div>
                    <el-image src="/static/image/home/fb_bg.png" class="fb"></el-image>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mt20">
            <el-col :span="18" class="echarts">
                <h3 class="tl mb10">活跃度</h3>
                <div id="main" style="width: 100%;height:265px;" class="border-1"></div>
            </el-col>
            <el-col :span="6" class="">
                <div class="progress border-1 mt30">
                    <h3 class="tl" style="font-size: 18px;">平均学习进度</h3>
                    <div class="dismantle el-progress">
                        <el-progress type="circle" :show-text="true" :percentage="info.xxjd == `0.00%`?0:Number(info.xxjd.split('%')[0])"
                            :stroke-width="10" :width="146"></el-progress>
                        <progressColor style="width: 0;height: 0;"></progressColor>
                        <div class="circle-center">
                            {{date}}更新
                        </div>
                    </div>
                </div>
            </el-col>

        </el-row>
        <el-row :gutter="20" class="mt20">
            <el-col :span="12">
                <div class="border-1 h-210 padd20 oh">
                    <div class="box box-pack-between box-algin-center">
                        <h3>教研组</h3>
                        <!-- <span style="font-size: 14px;" class="cp"></span> -->
                        <el-link :underline="false" @click="$router.push('/xtjy_admin')">查看更多>></el-link>
                    </div>
                    <div class="mt10 oh" v-if="info.jyzList.length !=0">
                        <div class="box box-pack-between box-align-center list" v-for="(item,index) in info.jyzList"
                            :key="index">
                            <div class="box box-align-center">
                                <el-avatar :size="40" class="avatar"
                                    src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png">
                                </el-avatar>
                                <span class="name over-hidden">{{item.name}}</span>
                                <span class="tip over-hidden">{{item.role}}</span>
                                <span class="number over-hidden">{{item.zgh}}</span>
                            </div>

                            <span class="add-time over-hidden">{{item.createTime}} 添加</span>
                        </div>
                    </div>
                    <div class="mt10 oh" v-else>
                        <el-empty description="暂无教研人员" :image-size="50"></el-empty>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="border-1 h-210 padd20" style="box-sizing: border-box;">
                    <div class="box box-pack-between box-algin-center">
                        <h3>证书</h3>
                        <!-- <span style="font-size: 14px;" class="cp"></span> -->
                        <el-link :underline="false" @click="$router.push('/zsbf')">查看更多>></el-link>
                    </div>
                    <div class="mt10 oh" v-if="info.certList !=0">
                        <div class="box box-pack-between box-align-center list" v-for="(item,index) in info.certList"
                            :key="index">
                            <div class="box box-align-center">
                                <i class="circle"></i>
                                <span class="mr30">{{item.createTime}}</span>
                                <span class="">发布《{{item.name}}》</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt10 oh" v-else>
                        <el-empty description="暂无证书" :image-size="50"></el-empty>
                    </div>
                </div>
            </el-col>

        </el-row>
    </el-row>
</template>

<script>
    import * as echarts from 'echarts';
    import progressColor from './components/progress-color.vue';
    export default {
        components: {
            progressColor
        },
        data() {
            return {
                schoolid: this.$store.state.schoolId,
                info: {
                    certList: [],
                    hydList: [],
                    jyzList: [],
                    rws: 0,
                    xxjd: `0.00%`,
                    xxrs: 0,
                    xxsc: 0.0
                },
                date: ''
            };
        },
        mounted() {
            this.getData()
            this.getNowTime()

        },
        methods: {
            getNowTime() {
                var date = new Date();
                //年 getFullYear()：四位数字返回年份
                var year = date.getFullYear(); //getFullYear()代替getYear()
                //月 getMonth()：0 ~ 11
                var month = date.getMonth() + 1;
                //日 getDate()：(1 ~ 31)
                var day = date.getDate();
                //时 getHours()：(0 ~ 23)
                var hour = date.getHours();
                //分 getMinutes()： (0 ~ 59)
                var minute = date.getMinutes();
                //秒 getSeconds()：(0 ~ 59)
                var second = date.getSeconds();

                console.log(year + '-' + month + '-' + day + '  ' + hour + ':' + minute);
                this.date = year + '-' + (month<10?`0${month}`:month) + '-' + (day<10?`0${day}`:day)+ '-' + (hour<10?`0${hour}`:hour )+ ':' + (minute<10?`0${minute}`:minute)

            },
            myEcharts() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    // 具体配置请查阅配置文档(上方链接)
                    tooltip : {
                       	trigger: 'axis',
                        axisPointer: {
                            type: 'cross',//指示类型
                            label: {
                            	// 横纵坐标指示区块颜色
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.info.hydList.length != 0 ? this.info.hydList.map(res => {
                            return res.dt
                        }) : [],
                        axisLabel: {
                             interval: 0,
                             rotate: 40
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: this.info.hydList.length != 0 ? this.info.hydList.map(res => {
                            return res.cnt
                        }) : [],
                        type: 'line',
                        smooth: true
                    }],
                    color: "#5470c6",
                    // grid:{
                    // 	top:100,
                    //     left:100,//调整y轴与左侧的距离，显示更多文字
                    //     bottom:100,
                    //     right:100
                    // }

                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener('resize', function() {
                    myChart.resize() // 监听窗口是否变化,变化的话就重新绘制图表
                })
            },
            getData() {
                let url = '/tongji/index';
                let params = {
                    schoolid: this.schoolid
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);

                    this.info = res
                    this.myEcharts()
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    * {
        font-family: Source Han Sans CN;
    }

    .dismantle /deep/ .el-progress-circle {

        // 进度条颜色
        svg>path:nth-child(2) {
            stroke: url(#dismantle); // 该url() 中填入的是, 对应组件中的 id 名
        }
    }

    .circle-center {
        margin-top: 30px;
        font-family: Source Han Sans CN;
        font-size: 16px;
        color: #6D77FA;
    }

    .border-1 {
        border: 1px solid #E3E6F5;
        border-radius: 18px;
    }

    .h-210 {
        height: 210px;
        box-sizing: border-box;
        color: #2F3142;
        font-size: 18px;
    }

    .progress {
        box-sizing: border-box;
        padding: 20px;
        // width: 100%;
        height: 265px;
        background: #FFFFFF;
        // border: 2px solid #E3E6F5;
        border-radius: 18px;
    }

    /deep/ .el-progress__text {
        color: #626BF1;
        font-size: 28px !important;
        font-family: PingFang SC;
    }

    .main-cont {
        padding: 40px;

        .m-h3 {
            font-size: 24px;
        }

        .item-list {

            .bg-purple {
                // width: 486px;
                height: 197px;
                background: #FFFFFF;
                border: 1px solid #E3E6F5;
                border-radius: 18px;
            }

            .grid-content {
                position: relative;
                min-height: 36px;
            }

            .top {
                box-sizing: border-box;
                padding: 10px 30px;
                width: 100%;

                h3 {
                    font-size: 20px;
                }

                .img {
                    width: 45px;
                    height: 45px;
                }
            }

            .bottom {
                box-sizing: border-box;
                margin-top: 40px;

                .time-num {
                    padding: 0 7%;
                    font-size: 40px;
                    line-height: 40px;
                    color: #488AF7;
                }

                .learn-num {
                    color: #FF5A77;
                }

                .fb-num {
                    color: #FF9B4F;
                }
            }

            .time {
                position: absolute;
                top: 0;
                left: 0;
                width: 110px;
            }

            .learn {
                position: absolute;
                top: 0;
                left: 40px;
                width: 200px;
                // height: 65px;
            }

            .fb {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 110px;
            }


        }

        .tb {
            margin: 30px 0 !important;
            box-sizing: border-box;

            .echarts {
                height: 280px;
                background: #FFFFFF;
                border: 1px solid #E3E6F5;
                border-radius: 18px;
            }
        }
    }

    .list {
        // padding: 20px;
        font-size: 16px;
        margin-bottom: 10px;

        .avatar {
            min-width: 40px;
        }

        .name {
            width: 60px;
            min-width: 80px;

        }

        .tip {
            margin-right: 15px;
            min-width: 80px;
            height: 22px;
            line-height: 22px;
            background: #CBF8EE;
            border-radius: 3px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #0A9576;
        }

        .number {
            min-width: 120px;
        }

        .add-time {
            min-width: 140px;
        }

        .over-hidden {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .circle {
            margin-right: 20px;
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #FCBB4B;
            border-radius: 50%;
        }
    }

    /deep/ .el-empty{
        padding: 0;
    }
</style>
